<template>
  <div class="login-container">
    <div class="login-box">
      <div class="login-header">
        <div class="logo">
          <img src="@/assets/logo/apartment-logo.svg" alt="logo">
          <span class="title">智慧公寓管理系统</span>
        </div>
        <p class="subtitle">让公寓管理更智能，让生活更美好</p>
      </div>
      
      <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
        <el-form-item prop="username">
          <el-input
            v-model="loginForm.username"
            placeholder="请输入用户名"
            size="large"
            class="login-input"
          >
            <template #prefix>
              <el-icon><User /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="loginForm.password"
            type="password"
            placeholder="请输入密码"
            size="large"
            class="login-input"
            @keyup.enter="handleLogin"
          >
            <template #prefix>
              <el-icon><Lock /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <div class="login-options">
          <el-checkbox v-model="loginForm.rememberMe">记住密码</el-checkbox>
          <div class="register-link" v-if="register">
            <router-link class="link-type" :to="'/register'">立即注册</router-link>
          </div>
        </div>
        <el-form-item>
          <el-button
            :loading="loading"
            type="primary"
            size="large"
            class="login-button"
            @click.prevent="handleLogin"
          >
            {{ loading ? '登录中...' : '立即登录' }}
          </el-button>
        </el-form-item>
      </el-form>

      <div class="login-footer">
        <div class="footer-links">
          <span>© 2024 智慧公寓管理系统</span>
          <span class="divider">|</span>
          <span>技术支持</span>
        </div>
      </div>
    </div>
    
    <!-- 背景装饰 -->
    <div class="bg-decoration">
      <div class="circle circle-1"></div>
      <div class="circle circle-2"></div>
      <div class="circle circle-3"></div>
    </div>
  </div>
</template>

<script setup>
import { User, Lock } from '@element-plus/icons-vue'
import { getCodeImg } from "@/api/login"
import Cookies from "js-cookie"
import { encrypt, decrypt } from "@/utils/jsencrypt"
import useUserStore from '@/store/modules/user'

const userStore = useUserStore()
const route = useRoute()
const router = useRouter()
const { proxy } = getCurrentInstance()

const loginForm = ref({
  username: "",
  password: "",
  rememberMe: false
})

const loginRules = {
  username: [
    { required: true, trigger: "blur", message: "请输入账号" }
  ],
  password: [
    { required: true, trigger: "blur", message: "请输入密码" }
  ]
}

const loading = ref(false)
const redirect = ref(undefined)
const register = ref(true)

watch(route, (route) => {
  redirect.value = route.query && route.query.redirect
})

function handleLogin() {
  proxy.$refs.loginRef.validate(valid => {
    if (valid) {
      loading.value = true
      if (loginForm.value.rememberMe) {
        Cookies.set("username", loginForm.value.username, { expires: 30 })
        Cookies.set("password", encrypt(loginForm.value.password), { expires: 30 })
        Cookies.set("rememberMe", loginForm.value.rememberMe, { expires: 30 })
      } else {
        Cookies.remove("username")
        Cookies.remove("password")
        Cookies.remove("rememberMe")
      }
      userStore.login(loginForm.value).then(() => {
        router.push({ path: redirect.value || "/" })
      }).catch(() => {
        loading.value = false
      })
    }
  })
}

function getCookie() {
  const username = Cookies.get("username")
  const password = Cookies.get("password")
  const rememberMe = Cookies.get("rememberMe")
  loginForm.value = {
    username: username === undefined ? loginForm.value.username : username,
    password: password === undefined ? loginForm.value.password : decrypt(password),
    rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
  }
}

getCookie()
</script>

<style scoped>
.login-container {
  height: 100vh;
  width: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;

  .login-box {
    width: 480px;
    padding: 50px 40px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 10;

    .login-header {
      margin-bottom: 40px;
      text-align: center;

      .logo {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 16px;

        img {
          height: 56px;
          margin-right: 16px;
        }

        .title {
          font-size: 28px;
          font-weight: 700;
          color: #2c3e50;
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
        }
      }

      .subtitle {
        color: #7f8c8d;
        font-size: 14px;
        margin: 0;
        font-weight: 400;
      }
    }

    .login-form {
      .login-input {
        margin-bottom: 20px;

        :deep(.el-input__wrapper) {
          padding: 16px 20px;
          background-color: #f8f9fa;
          border: 2px solid transparent;
          border-radius: 12px;
          box-shadow: none;
          transition: all 0.3s ease;

          &:hover {
            background-color: #e9ecef;
          }

          &.is-focus {
            background-color: #fff;
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
          }
        }

        :deep(.el-input__prefix) {
          font-size: 18px;
          color: #6c757d;
        }
      }

      .login-options {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 25px 0;

        .register-link {
          .link-type {
            color: #667eea;
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s ease;
            
            &:hover {
              color: #764ba2;
            }
          }
        }
      }

      .login-button {
        width: 100%;
        height: 50px;
        border-radius: 12px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border: none;
        font-size: 16px;
        font-weight: 600;
        transition: all 0.3s ease;

        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
        }

        &:active {
          transform: translateY(0);
        }
      }
    }

    .login-footer {
      margin-top: 40px;
      text-align: center;

      .footer-links {
        color: #6c757d;
        font-size: 12px;
        
        .divider {
          margin: 0 8px;
        }
      }
    }
  }

  .bg-decoration {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;

    .circle {
      position: absolute;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.1);
      animation: pulse 10s infinite;

      &.circle-1 {
        width: 200px;
        height: 200px;
        top: -100px;
        left: -100px;
      }

      &.circle-2 {
        width: 300px;
        height: 300px;
        top: -150px;
        right: -150px;
      }

      &.circle-3 {
        width: 400px;
        height: 400px;
        bottom: -200px;
        right: -200px;
      }
    }

    @keyframes pulse {
      0% {
        transform: scale(0.5);
        opacity: 0.5;
      }
      50% {
        transform: scale(1);
        opacity: 1;
      }
      100% {
        transform: scale(0.5);
        opacity: 0.5;
      }
    }
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .login-container {
    .login-box {
      width: 90%;
      margin: 20px;
      padding: 40px 30px;

      .login-header {
        .logo {
          .title {
            font-size: 24px;
          }
        }
      }
    }
  }
}
</style>
